import { useEffect, useRef, useState } from "react";

function useElementTopDistance() {
  const [distance, setDistance] = useState(0);
  const elementRef = useRef<any>(null);

  useEffect(() => {
    const handleResize = () => {
      if (elementRef.current) {
        const rect = elementRef.current.getBoundingClientRect();
        setDistance(rect.top);
      }
    };

    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return { elementRef, distance };
}

export default useElementTopDistance;
